<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制</title>
    <link rel="stylesheet" type="text/css" href="../../lib/openLayers/4.6.5/ol.css" >
    <script type="text/javascript" src="../../lib/openLayers/4.6.5/ol.js"></script>
    <script type="text/javascript" src="../../js/OpenLayersUtil.js"></script>

</head>
<body>
<div id="menu">
    <label>几何图形类型：&nbsp;</label>
    <select id="type">
        <option value="None">无</option>
        <option value="Point">点</option>
        <option value="LineString">线</option>
        <option value="Polygon">多边形</option>
        <option value="Circle">圆</option>
        <option value="Square">正方形</option>
        <option value="Box">长方形</option>
    </select>
</div>
<div id="map" style="height: 900px;width: 100%;"></div>
<script>
    /**
     * 说明：
     * 1.创建一个图层Vector为画笔的操作图层
     * 2.将图层Vector加到地图上，为后面画笔操作作准备
     * 3.创建画笔工具Draw，将图层Vector赋给画笔
     * 4.将画笔工具Draw加到地图上
     */

    // 创建地图
    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        view: new ol.View({
            center: [0, 0],
            zoom: 3
        })
    });

    // 实例化一个矢量图层Vector作为绘制层
    var source = new ol.source.Vector();
    var vectorLayer = new ol.layer.Vector({
        source: source,
        style: new ol.style.Style({
            // 填充样式
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, 0.2)'
            }),
            // 线样式
            stroke: new ol.style.Stroke({
                color: '#ffcc33',
                width: 2
            }),
            // 点样式
            image: new ol.style.Circle({
                radius: 7,
                fill: new ol.style.Fill({
                    color: '#ffcc33'
                })
            })
        })
    });
    // 将绘制层添加到地图容器中
    map.addLayer(vectorLayer);

    // ol.Interaction.Draw类的对象
    var draw;
    // 绘制类型选择对象
    var typeSelect = document.getElementById('type');
    // 用户更改绘制类型触发的事件
    typeSelect.onchange = function(e){
        // 移除绘制图形控件
        map.removeInteraction(draw);
        // 添加绘制图形控件
        addInteraction();
    };
    // 绘制图形控件
    function addInteraction(){
        // 绘制类型
        var typeValue = typeSelect.value;
        console.log(typeValue);
        if(typeValue == 'None') {
            // 清空绘制的图形
            source.clear();
            return;
        }
        var geometryFunction, maxPoints;
        if(typeValue === 'Square'){ //正方形
            // 设置绘制类型为Circle
            typeValue = 'Circle';
            // 设置几何信息变更函数，即创建正方形
            geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
        }else if(typeValue === 'Box'){// 长方形(5.0以上版本失效)
            // 设置绘制类型为LineString
            typeValue = 'LineString';
            // 设置最大点数为2
            maxPoints = 2;
            //设置几何信息变更函数，即设置长方形的坐标点
            geometryFunction = function(coordinates, geometry){
                if(!geometry){ // !geometry  意思是如果没有geometry则...
                    // 多边形
                    geometry = new ol.geom.Polygon(null);
                }
                //设置起始点及终止点
                var start = coordinates[0];
                var end = coordinates[1];
                //特别注意，长方形终止点与起始点重合
                geometry.setCoordinates([
                    [
                        start,
                        [start[0], end[1]],
                        end,
                        [end[0], start[1]],
                        start
                    ]
                ]);
                return geometry;
            };
        }

        //实例化图形绘制控件对象并添加到地图容器中
        draw = new ol.interaction.Draw({
            source: source,
            // 几何图形类型
            type: typeValue,
            // 几何信息变更时的回调函数
            geometryFunction: geometryFunction,
            // 最大点数
            maxPoints: maxPoints
        });


        // 给画笔添加绘制开始函数
        draw.on("drawstart", function (evt) {
            source.clear();
        });
        // 给画笔添加结束绘制函数
        draw.on("drawend", function (evt) {
            // 坐标赋值
            console.log(evt.feature.getGeometry());
            // console.log(evt.feature.getGeometry().getCoordinates())
        });
        // 将画笔添加到地图上
        map.addInteraction(draw);
    }
</script>
</body>
</html>